import QtQuick 2.5
import QtQuick.Window 2.0
import QtQuick.Controls

Window {
    id:app
    width: 940
    height: 645
    visible: true

    //定义列表好友
    ListModel{
        id: friendListModel
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/SubNum.png"
           nickname:"订阅号"
           content:"奔跑中的奶酪：别走弯路一文搞懂并上手视频软件里的神！"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/weixPay.png"
           nickname:"微信支付"
           content:"已支付￥19.00"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/weixSport.png"
           nickname:"微信运动"
           content:"[应用消息]"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           nickname:"张三"
           content:"干啥呢？下午茶喝了没有啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header3.png"
           nickname:"李四"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header4.png"
           nickname:"王五"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header5.png"
           nickname:"大飞老师"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header6.png"
           nickname:"风灵月影"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header7.png"
           nickname:"萧炎"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           nickname:"韩立"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           nickname:"王林"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           nickname:"鬼厉"
           content:"你好啊"
       }
       ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           nickname:"陆雪琪"
           content:"你好啊"
       }
   }

    //聊天信息
    ListModel{
        id: chatContentList
        ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           content:"干啥呢？下午茶喝了没有啊"
           meFlag:false
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"还没呢，在忙，没时间"
           meFlag:true
        }
        ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           content:"嗯嗯"
           meFlag:false
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"你呢，最近在干啥"
           meFlag:true
        }
        ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           content:"最近我喜欢每天看电影"
           meFlag:false
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"看的啥呢"
           meFlag:true
        }
        ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           content:"肖申克的救赎"
           meFlag:false
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"这个电影我也看过很不错"
           meFlag:true
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"讲述了一个人越狱得到救赎的故事"
           meFlag:true
        }
        ListElement{
           friendHeaderIcon:"qrc:/headerImage/header2.png"
           content:"是的，我很喜欢"
           meFlag:false
        }
        ListElement{
           friendHeaderIcon:"qrc:/icon/myHeader.png"
           content:"我也是"
           meFlag:true
        }
    }



    //左侧栏
    Rectangle{
        id: rectLeft
        width: 54
        height: parent.height
        color: "#2E2E2E"

        //头像
        Rectangle{
           id: headerButton
           width: parent.width - 16
           height: parent.width - 16
           anchors.horizontalCenter: parent.horizontalCenter
           color: "red"
           y: 35

           Image {
               id: headerPhoto
               source: "qrc:/icon/myHeader.png"
               width: parent.width
               height: parent.width
               // anchors.horizontalCenter: parent.horizontalCenter
           }

           MouseArea{
               anchors.fill: parent
               onClicked:console.log("点击了头像")
           }
        }

        //左边栏功能按钮
        ListView{
            id: listView
            width: parent.width
            height: 300
            y: 100
            spacing: 15
            focus: true
            currentIndex: -1
            model: ListModel{
                ListElement{
                    name: "chatBtn"
                    imageUrl:"qrc:/icon/chat.svg"
                    imageUrlHover:"qrc:/icon/chat-hover.svg"
                }
                ListElement{
                    name: "peopleBtn"
                    imageUrl:"qrc:/icon/people.svg"
                    imageUrlHover:"qrc:/icon/people-hover.svg"
                }
                ListElement{
                    name: "collectBtn"
                    imageUrl:"qrc:/icon/collect.svg"
                    imageUrlHover:"qrc:/icon/collect-hover.svg"
                }
                ListElement{
                    name: "fileBtn"
                    imageUrl:"qrc:/icon/file.svg"
                    imageUrlHover:"qrc:/icon/file-hover.svg"
                }
                ListElement{
                    name: "friendsBtn"
                    imageUrl:"qrc:/icon/friends.svg"
                    imageUrlHover:"qrc:/icon/friends-hover.svg"
                }
            }
            delegate: Rectangle{
                id: rectBtn
                width: parent.width - 30
                height: parent.width - 30
                anchors.horizontalCenter: parent.horizontalCenter
                color: "transparent"

                Image{
                    id: imageBtn
                    source: rectBtn.focus?imageUrlHover+"":imageUrl+""
                    smooth: true
                    width: parent.width
                    height: parent.width
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                MouseArea{
                    anchors.fill: parent

                    onClicked:{
                        listView.currentIndex = index;
                        rectBtn.focus = true;


                        switch (name) {
                            case "chatBtn":
                                console.log("聊天按钮被点击")
                                break;
                            case "peopleBtn":
                                console.log("好友按钮被点击")
                                break;
                            case "collectBtn":
                                console.log("收藏按钮被点击")
                                break;
                            case "fileBtn":
                                console.log("文件按钮被点击")
                                break;
                            case "friendsBtn":
                                console.log("朋友圈按钮被点击")
                                break;
                            default:
                                console.log("...")
                        }


                    }
                }


            }
        }

    }


    //中间栏
    Rectangle{
        id: rectPeople
        width: 310
        height: parent.height
        x: rectLeft.width
        color: "#F5F5F5"
        border.width: 1
        border.color: "#D6D6D6"

        //搜索栏
        Rectangle{
            id: searchRect
            width: parent.width
            height: 60
            color: "#F7F7F7"
            border.width: 1
            border.color: "#E7E7E7"
            z:1

            //搜索框
            TextField{
                id: searchText
                width: 250
                height: 25
                placeholderText: "搜索"
                anchors.verticalCenter: parent.verticalCenter
                x:14
                leftPadding: 30
                background: Rectangle{
                    color: searchText.focus?"#F7F7F7":"#E2E2E2"
                    border.width: 1
                    border.color: searchText.focus?"#E2E2E2":"#F7F7F7"
                    radius: 5
                }
                //搜索icon
                Image{
                    id: searchIcon
                    width: 15
                    height: 15
                    source: "qrc:/icon/search.svg"
                    anchors.verticalCenter: parent.verticalCenter
                    x:5
                }
                //取消icon
                Image {
                    id: cancelIcon
                    width: 15
                    height: 15
                    source: "qrc:/icon/cancel.svg"
                    anchors.verticalCenter: parent.verticalCenter
                    visible: searchText.focus
                    x: parent.width -20
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            searchText.clear();  // 清空文本框
                            searchText.focus = false;//失去焦点
                        }
                    }
                }

            }

            //添加好友按钮
            Rectangle{
                id: addFriendsRect
                width: 25
                height: 25
                anchors.verticalCenter: parent.verticalCenter
                x: searchText.width + searchText.x + 10
                color: "#E2E2E2"
                radius: 3
                Image {
                    id: addIcon
                    source: "qrc:/icon/add.svg"
                    width: 18
                    height: 18
                    x:parent.width-22
                    y:parent.height-22
                }
                MouseArea{
                    anchors.fill: parent
                    hoverEnabled:true
                    onEntered: {
                        parent.color = "#CAC9C9"
                    }
                    onExited: {
                        parent.color = "#E2E2E2"
                    }
                }

            }
        }




        //好友栏
        Rectangle{
            id: friendsRect
            width: parent.width
            height: parent.height - searchRect.height
            color: "#E5E4E4"
            y: 60

            ListView {
               id: lv
               anchors.fill: parent
               // ScrollBar.vertical.interactive: true
               model:friendListModel
               delegate: Rectangle{
                   id:friendsChatContent
                   width: friendsRect.width
                   height: 60
                   color: "#ECE9E7"

                   Image {
                       id: friendHeaderImage
                       source: friendHeaderIcon+""
                       width:45
                       height: 45
                       anchors.verticalCenter: parent.verticalCenter
                       x:10
                   }
                   Text {
                       id: nicknameText
                       text: qsTr(nickname+"")
                       x:80
                       y:parent.height-50
                       // font.bold: true
                       // font.weight: Font.Light
                   }
                   Text {
                       id: contentText
                       text: qsTr(content+"")
                       x: 80
                       y: nicknameText.y + 20
                       width:200
                       elide: Text.ElideRight
                       color: "#999999"
                   }
                   Text {
                       id: timeText
                       text: qsTr("昨天")
                       x: parent.width-30
                       y: parent.height-50
                       color: "#999999"
                   }
                   MouseArea{
                       anchors.fill: parent
                       hoverEnabled: true
                       onEntered: {
                           parent.color = "#CAC8C6"
                           // console.log("执行操作"+nickname)
                       }
                       onExited:{
                           parent.color = "#ECE9E7"
                       }
                       onClicked:{
                           lv.currentIndex = index;
                           friendsChatContent.focus = true;
                           console.log("好友当前焦点:"+nickname)
                       }
                   }


               }

            }


        }
    }


    //聊天框栏
    Rectangle{
        id: rectChat
        width: parent.width-rectLeft.width-rectPeople.width
        height: parent.height
        x: rectLeft.width + rectPeople.width
        color: "#F5F5F5"
        border.width: 1
        border.color: "#D6D6D6"

        //聊天名栏目
        Rectangle{
            id: chatNameRect
            width: parent.width
            height: 60
            color: "#F5F5F5"
            z:1
            Text {
                id: name
                text: qsTr("张三")
                width:200
                anchors.verticalCenter: parent.verticalCenter
                font.pointSize: 15
                font.weight: Font.Light
                color: "#000000"
                x: 20
            }
        }

        //聊天内容栏
        Rectangle{
            id: chatContentRect
            width: parent.width
            height: parent.height - chatNameRect.height
            color: "#F5F5F5"
            y: 60
            border.width: 1
            border.color: "#E7E7E7"
            //聊天内容
            ListView{
                id: chatConent
                anchors.fill: parent
                model: chatContentList
                spacing:5
                // flickableDirection:Flickable.Flickable.VerticalFlick
                delegate: Rectangle{
                    id: contentItem
                    width: parent.width
                    height: 45
                    color: "transparent"
                    Image {
                        id: chatHeader
                        source: friendHeaderIcon+""
                        width: 30
                        height: 30
                        anchors.verticalCenter: parent.verticalCenter
                        x: meFlag?parent.width - 60:35
                    }
                    Rectangle{
                        id: chatRect
                        width: chatText.width+10
                        height: parent.height-10
                        x: meFlag?parent.width-width-75:80
                        y: parent.height - 32
                        color: meFlag?"#95EC69":"white"
                        anchors.verticalCenter: parent.verticalCenter
                        radius: 5
                        Text {
                            id: chatText
                            text: qsTr(content)
                            font.pointSize: 10
                            font.weight: Font.Light
                            anchors.centerIn: parent
                        }

                    }

                }
            }

            Rectangle{
                id: chatSendRect
                width: parent.width
                height: 140
                y:parent.height-140
                border.color: "#ECECEC"
                //消息输入框
                TextArea{
                    id:chatSendFiled
                    width: parent.width
                    height: parent.height
                    wrapMode: Text.WrapAnywhere
                    font.pointSize: 12
                    background:Rectangle{
                        border.width: 0.3

                    }
                }
                //发送按钮
                Button{
                    id: sendBtn
                    width: 100
                    height: 30
                    text: "发送(S)"
                    x:parent.width - 120
                    y:parent.height - 50
                    palette.buttonText: "#31C87A"
                    background: Rectangle{
                        color: "#E9E9E9"
                    }

                }
            }
        }
    }

}
